<template lang="html">
	<div>	
		<div :class="$style.bookInfoBox">
			<img :class="$style.bookImg" :src="bookinfo.cover" alt="">
			<div :class="$style.bookInfo">
				<p>{{bookinfo.title}}</p>
				<p>{{bookinfo.author}}</p>
				<p>{{bookinfo.majorCate}} | {{minorCate}}</p>
				<p v-if="bookinfo.updated">最新: {{updatedTime}}</p>
				<p>追书人数：{{bookinfo.latelyFollower}}<span v-if="bookinfo.rating" :class="$style.bookHot">{{bookinfo.rating.score}}</span></p>
			</div>
			<div @click.stop="readBook"><btn :cname="$style.btnRead">立刻阅读</btn></div>
		</div>
		<div :class="$style.bookDescBox">
	    <p :class="[$style.bookDesc,$style.bookDescEllipsis]">
	      {{bookinfo.longIntro}}
	    </p>
	    <div :class="$style.lastChapterBox">
	      <span>目录</span>&nbsp;&nbsp;&nbsp;&nbsp;<span :class="$style.lastChapter">最新:{{bookinfo.lastChapter}}</span>
	    </div>
	  </div>
	</div>
</template>
<script>
	import btn from '../core/btn';
	export default {
		props: {
			bookinfo: {
				type: Object,
				default() {
					return {
						cover: 'http://img.17k.com/cmsimg/recommend/2018/04/1523200591.4495.jpg',
						title: '书名',
						author: '作者',
						majorCate: '主类',
						minorCate: '子类',
						latelyFollower: '追书人数',
						lastChapter: '最新章节',
						shortIntro: '小说简介',
						rating: { score: 0.0, },
					}
				}
			}
		},
		components: {
			btn,
		},
		computed: {
			updatedTime() {
				let timer = this.bookinfo.updated;
				timer = timer.replace(/T/,' ').replace(/.[^\.]+$/,'');
				return timer;
			},
			minorCate() {
				return this.bookinfo.tags.length ? this.bookinfo.tags[0] : this.bookinfo.minorCate;
			}
		},
		methods: {
			readBook() {
				this.$emit('readBook');
			}
		}
	}

</script>
<style lang="scss" module>
	.bookInfoBox {
		width: 100%;
		margin-top: 110px;
		padding: 36px;
		overflow: hidden;
		background-color: rgba(130,109,111,0.9);
		.bookImg {
			display: inline-block;
			max-width: 208px;
			height: 280px;
		}
		.bookInfo {
			display: inline-block;
			max-height: 280px;
			color: #fff;
			font-size: 27px;
			padding-left: 24px;
			position: relative;
			p {
				margin-bottom: 18px;
			}
			p:nth-child(1) {
				font-size: 36px;
				margin-top: 30px;
			}
			p:last-child {
				margin-bottom: 0;
				.bookHot {
					font-size: 46px;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
		.btnRead {
			width: 100%;
			line-height: 100px;
			margin-top: 36px;
			background-color: #15ad8d;
			color: #ffffff;
			border: none;
			font-size: 36px;
		}
	}
	.bookDescBox {
    font-size: 30px;
    padding: 0 36px;
    background-color: #f5f5f5;
    .bookDesc {
      padding-bottom: 36px;
      color: #000;
    }
    .bookDescEllipsis {
      
    }
    .lastChapterBox {
      height: 100px;
      line-height: 100px;
      /* overflow: hidden; */
      border-top: 1px solid #d8d8d8;
      color: #8d8d8d;
      .lastChapter {
      	font-size: 27px;
      	text-overflow: ellipsis;
      	white-space: wrap;
      	overflow: hidden;
      }
    }
  }
</style>